<template>
  <el-card style="height: 100%; position: relative" class="userInfo-box">
    <div  class="userInfo-img">
      <img src="@/assets/img/user.jpg" class="userImage" />
      <img src="@/assets/img/male.png" class="gender" v-if="(userInfo.userGender !== 1)"/>
      <img src="@/assets/img/famale.png" class="gender" v-else/>
    </div>

    <div class="userInfo-content">
      <div><strong>姓名：</strong>
        {{userInfo.userName}}
      </div>
      <div><strong>学号：</strong>
        {{userInfo.userId}}
      </div>
      <div><strong class="twoWord">专业：</strong>
        <span v-if="editAble">{{userInfo.userMajors}}</span>
        <el-input v-else v-model="userInfo.userMajors" clearable placeholder="请输入你要填写的信息" class="input"></el-input>
      </div>
      <div><strong class="twoWord">电话：</strong>
        <span v-if="editAble">{{userInfo.userPhone}}</span>
        <el-input v-else v-model="userInfo.userPhone" clearable placeholder="请输入你要填写的信息" class="input"></el-input>
      </div>
      <div><strong class="twoWord">邮箱：</strong>
        <span v-if="editAble">{{userInfo.userEmail}}</span>
        <el-input v-else v-model="userInfo.userEmail" clearable placeholder="请输入你要填写的信息" class="input"></el-input>
      </div>
      <div><strong class="twoWord">部门：</strong>
        <span v-if="editAble">{{userInfo.userDepartment}}</span>
        <el-input v-else v-model="userInfo.userDepartment" clearable placeholder="请输入你要填写的信息" class="input"></el-input>
      </div>
      <div>
        <strong class="fourWord">当前职位：</strong>
        <span v-if="userInfo.userLevel == 0">root</span>
        <span v-else-if="userInfo.userLevel == 1">组长</span>
        <span v-else>成员</span>
      </div>
      <div><strong class="fourWord">个人名言：</strong>
        <el-tooltip v-if="editAble" class="item" effect="dark" :content="userInfo.userMotto" placement="top-end">
          <span>{{userInfo.userMotto}}</span>
        </el-tooltip>
        <el-input v-else v-model="userInfo.userMotto" clearable placeholder="请输入你要填写的信息" class="input"></el-input>
      </div>
    </div>
    <div class="btn">
      <el-button type="primary" class="edit" @click="editOrSave" > {{editAble? '编辑': '保存'}}</el-button>
      <el-button class="edit" v-show="!editAble" @click="cancle">取消</el-button>
    </div>
  </el-card>
</template>
<script>
export default {
  data () {
    return {
      userInfo: {},
      editAble: true
    }
  },
  created () {
    this.getUserInfo()
  },
  methods: {
    // 获取用户个人信息
    getUserInfo () {
      console.log('hahaha')
      this.$http
        .get('/v1/oa/User/selectByIdOrName', {
          params: {
            idOrName: window.sessionStorage.getItem('userId')
          }
        })
        .then((res) => {
          // console.log(res)
          if (res.data.code !== 200) this.$message.error('用户信息获取失败')
          this.userInfo = res.data.data
          console.log(this.userInfo)
        })
    },
    // 编辑 or 保存
    editOrSave () {
      this.editAble = !this.editAble
      // this.$http.get('')
      // 上传文件得接口写的有问题
      // console.log(this.userInfo)
      if (this.editAble) {
        this.$http({
          method: 'put',
          url: '/v1/oa/User/saveUser',
          params: {
            id: window.sessionStorage.getItem('userId'),
            motto: this.userInfo.userMotto,
            majors: this.userInfo.userMajors,
            phone: this.userInfo.userPhone,
            email: this.userInfo.userEmail
          }
        }).then(res => {
          if (res.data.code !== 200) this.$message.error('修改失败')
          this.$message.success('修改信息成功')
        })
      }
    },
    cancle () {
      this.editAble = !this.editAble
    }
  }
}
</script>
<style lang="less" scoped>
.userInfo-box{
  height: 100%;
  overflow: hidden;
  .userInfo-img{
    width: 100%;
    position: relative;
    margin-bottom: 10px;
    .userImage{
      width: 170px;
      height: 170px;
      display: block;
      border-radius: 170px;
      overflow: hidden;
      margin: auto auto;
    }
    .gender{
      height: 50px;
      width: 50px;
      display: block;
      position: absolute;
      bottom: -15px;
      left: 50%;
    }
  }
  .userInfo-content{
    margin: 10px 0;
    div{
      line-height: 38px;
      display: flex;
      width: 100%;
      strong.fourWord{
        min-width: 80px;
      }
      .twoWord{
        min-width: 60px;
      }
      span{
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
     /deep/ .input{
      box-sizing: border-box;
        width: 100%;
        margin: 1px 0;
      }
    }
  }

}
</style>
